<template>
  <el-dialog
    title="发票申请"
    :visible.sync="dialogVisible"
    width="50%"
    :before-close="handleClose"
  >
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="发票类型" prop="invoicetype">
        <el-radio-group v-model="ruleForm.invoicetype">
          <el-radio label="公司发票"></el-radio>
          <el-radio label="个人发票"></el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="项目名称" prop="name">
        <el-input v-model="ruleForm.name"></el-input>
      </el-form-item>
      <el-form-item v-if="iscompany" label="单位名称" prop="company">
        <el-input v-model="ruleForm.company"></el-input>
      </el-form-item>
      <el-form-item label="姓名" prop="nickname">
        <el-input v-model="ruleForm.nickname"></el-input>
      </el-form-item>
      <el-form-item label="合计金额" prop="allPrice">
        <el-input v-model="ruleForm.allPrice"></el-input>
      </el-form-item>
      <el-form-item v-if="iscompany" label="开票类型" prop="type">
        <el-radio-group v-model="ruleForm.type">
          <el-radio label="普票"></el-radio>
          <el-radio label="专票"></el-radio>
        </el-radio-group>
      </el-form-item>
      <!-- <el-form-item label="款项到账日期" prop="date">
        <el-date-picker
          v-model="ruleForm.date"
          type="datetime"
          placeholder="选择日期"
        >
        </el-date-picker>
      </el-form-item> -->
      <el-form-item v-if="iscompany" label="纳税人识别号" prop="isnum">
        <el-input v-model="ruleForm.isnum"></el-input>
      </el-form-item>
      <el-form-item label="电子邮箱" prop="email">
        <el-input v-model="ruleForm.email"></el-input>
      </el-form-item>
      <el-form-item v-if="iscompany" label="公司地址" prop="address">
        <el-input v-model="ruleForm.address"></el-input>
      </el-form-item>
      <el-form-item label="联系电话" prop="phone">
        <el-input v-model="ruleForm.phone"></el-input>
      </el-form-item>
      <el-form-item v-if="iscompany" label="开户行" prop="bank">
        <el-input v-model="ruleForm.bank"></el-input>
      </el-form-item>
      <el-form-item v-if="iscompany" label="照片">
        <el-upload
          class="avatar-uploader"
          :action="http + '/admin/MemberApply/upload'"
          :show-file-list="false"
          :file-list="fileList"
          :data="{ field: 'image' }"
          name="img"
          :on-success="onSuccess"
          :headers="headers"
        >
          <img v-if="imageUrl" :src="imageUrl" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="commit">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { applyinvoice } from "@/api/admin";

import {
  getapplyid,
  getGZ,
  getAdminToken,
  getAdminUserId,
  setNickname,
} from "@/utils/auth";
// import { setNickname } from '../../../../shandongzhiliang/src/utils/auth';
export default {
  components: {},

  data() {
    var validatePhonePass = (rule, value, callback) => {
      if (!/^1[3456789]\d{9}$/.test(value)) {
        callback(new Error("请输入正确手机号码"));
      } else {
        callback();
      }
    };
    return {
      gz: "",
      iscompany: true,
      headers: {
        MemberToken: getAdminToken(),
        MemberId: getAdminUserId(),
      },
      fileList: [],
      imageUrl: "",
      http:
        process.env.NODE_ENV === "development"
          ? process.env.VUE_APP_BASE_API
          : window.location.href.slice(
              0,
              window.location.href.indexOf("/user")
            ),
      dialogVisible: false,
      ruleForm: {
        nickname: "",
        invoicetype: "公司发票",
        type: "普票",
        name: "",
        company: "",
        allPrice: "",
        date: "",
        isnum: "",
        email: "",
        address: "",
        phone: "",
        bank: "",
      },
      rules: {
        type: [{ required: true, message: "该项不得为空", trigger: "change" }],
        name: [{ required: true, message: "该项不得为空", trigger: "blur" }],
        nickname: [
          { required: true, message: "该项不得为空", trigger: "blur" },
        ],
        company: [{ required: true, message: "该项不得为空", trigger: "blur" }],
        allPrice: [
          { required: true, message: "该项不得为空", trigger: "blur" },
        ],
        date: [
          { required: false, message: "请选择到账日期", trigger: "change" },
        ],
        isnum: [{ required: false, message: "该项不得为空", trigger: "blur" }],
        email: [{ required: true, message: "该项不得为空", trigger: "blur" }],
        address: [
          { required: false, message: "该项不得为空", trigger: "blur" },
        ],
        phone: [
          {
            validator: validatePhonePass,
            required: true,
            message: "请输入合法联系电话",
            trigger: "blur",
          },
        ],
      },
    };
  },
  watch: {
    "ruleForm.date": {
      handler(val) {
        console.log(val);
      },
    },
    "ruleForm.invoicetype": {
      deep: true,
      handler(val) {
        if (val == "公司发票") {
          this.iscompany = true;
        } else {
          this.iscompany = false;
        }
      },
    },
  },

  methods: {
    onSuccess(res) {
      this.imageUrl = res.data.url;
    },
    handleClose() {
      this.dialogVisible = false;
    },
    open(gz) {
      this.gz = gz;
      this.dialogVisible = true;
    },
    commit() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          applyinvoice({
            gz: this.gz,
            applyid: getapplyid(),
            member_id: getAdminUserId(),
            hutou: this.ruleForm.company,
            nickname: this.nickname,
            shuihao: this.ruleForm.isnum,
            image: this.imageUrl,
            more: JSON.stringify(this.ruleForm),
          }).then((res) => {
            if (res.code == 200) {
              this.$message.success("已提交申请");
              this.dialogVisible = false;
              this.ruleForm = {
                nickname: "",
                invoicetype: "公司发票",
                type: "普票",
                name: "",
                company: "",
                allPrice: "",
                date: "",
                isnum: "",
                email: "",
                address: "",
                phone: "",
                bank: "",
              };
            } else {
              this.$message.error(res.msg);
            }
          });
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep {
  .demo-ruleForm {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    .el-form-item {
      width: 22vw;
      .avatar {
        max-width: 100px;
        max-height: auto;
      }
      .el-form-item__label {
        width: 120px !important;
      }
    }
    .el-upload {
      width: 100px;
      height: 100px;
      border: 1px solid #dcdfe6;
      border-radius: 8px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .el-radio__input {
      display: inline-block !important;
    }
  }
}
</style>
